import React, { useState } from 'react'
import './index.css'
import { Button, Checkbox, Input, message, Select, Space } from 'antd'
import { useNavigate } from 'react-router-dom';

export default function index() {
  const navigate = useNavigate();
  const [messageApi, contextHolder] = message.useMessage();
  // 登录方式切换图标
  const [loginFlag, setLoginFlag] = useState(true)
  const changeloginType = () => {
    setLoginFlag(!loginFlag)
    setCodeLogin(false)
  }
  // 是否验证码登录
  const [codelogin, setCodeLogin] = useState(false)
  // 验证码登录选项
  const options = [
    {
      value: '+ 86',
      label: '+ 86',
    },
  ];
  // 存放输入手机号获取验证码的值
  const [phone, setPhone] = useState('')
  // 倒计时
  let [count, setCount] = useState(60)
  // 验证码按钮的状态
  const [buttonFlag, setButtonFlag] = useState(true);
  // 点击验证码的函数
  const getcode = () => {
    let reg = /^1[3-9]\d{9}$/.test(phone)
    if (reg) {
      setButtonFlag(false)
      let time = setInterval(() => {
        setCount(count--)
        if (count <= 0) {
          setButtonFlag(true)
          setCount(60)
          clearInterval(time)
        }
      }, 1000)
    } else {
      messageApi.open({
        type: 'error',
        content: 'This is an error message',
      });
    }
  }
  // 判断登录还是注册
  const [isLogin, setIsLogin] = useState(true)
  // 注册方式
  const [registerFlag, setRegisterFlag] = useState(false)
  // 用户注册的信息
  let [registerInfoUser, setRegisterInfoUser] = useState(60)
  // 用户注册的状态
  const [RuserFlag, setRuserFlag] = useState(true)
  // 用户存放的数据
  const [usertxt, setUsertxt] = useState('')
  // 用户注册获取验证码
  const usergetcode = () => {
    setRuserFlag(false)
    let reg = /^1[3-9]\d{9}$/.test(usertxt)
    if (reg) {
      let time = setInterval(() => {
        setRegisterInfoUser(registerInfoUser--)
        if (count <= 0) {
          setRuserFlag(true)
          setRegisterInfoUser(60)
          clearInterval(time)
        }
      }, 1000)
    } else {
      messageApi.open({
        type: 'error',
        content: 'This is an error message',
      });
    }
  }
  // 点击登录的函数
  const gotohome = () => {
    navigate('/admin')
    localStorage.setItem('token', 'saf1d5sf1sd5f18ss1fsd5f15sad15as1d8asd15asd16xsa51f5as1f5as1d5as1d5as1d5as1d5a1d5A1D6AS1F5AS8CS477898')
  }
  return (
    <div className='box'>
      {isLogin ?
        <div className='formlogin'>
          {loginFlag ? <img src="https://cdn8.axureshop.com/demo2024/2316038/images/1-%E8%B4%A6%E5%8F%B7%E5%AF%86%E7%A0%81%E7%99%BB%E5%BD%95/u10.svg" alt="" style={{ width: '50px', height: '50px', position: 'absolute', right: '0px', top: '0px', transform: "rotate(-90deg)", cursor: 'pointer' }} onClick={changeloginType} /> :
            <img src="/diannao.png" alt="" style={{ width: '50px', height: '50px', position: 'absolute', right: '0px', top: '0px', cursor: 'pointer' }} onClick={changeloginType} />
          }

          <div style={{ fontSize: '19px', marginTop: '20px' }}>{loginFlag && !codelogin ? '密码登录' : !loginFlag && !codelogin ? '手机扫码,安全登录' : '短信验证码登录'}</div>
          {loginFlag && !codelogin ?
            <div>
              <Input placeholder="请输入您的手机号/邮箱" style={{ width: '321px', borderRadius: '0px', margin: '20px 0px' }} />
              <Input.Password placeholder="请输入密码" style={{ width: '321px', borderRadius: '0px' }} />
              <br />
              <Checkbox style={{ marginTop: '20px' }}>
                <span style={{ marginLeft: '10px' }}>自动登录</span>
              </Checkbox>
              <br />
              <Button type='primary' style={{ borderRadius: '0px', width: '321px', marginTop: '20px', height: '42px' }} onClick={gotohome}>登录</Button>
            </div>
            : !loginFlag && !codelogin ?
              <div style={{ marginTop: '20px', width: '153px', height: '187.5px', marginLeft: '85px' }}>
                <img src="https://cdn8.axureshop.com/demo2024/2316038/images/2-%E6%89%AB%E7%A0%81%E7%99%BB%E5%BD%95/u31.svg" alt="" />
                <p style={{ fontSize: '12px', marginTop: '10px' }}>打开手机XX 扫描二维码</p>
              </div>
              :
              <div>
                <Space.Compact style={{ width: '321px', borderRadius: '0px', margin: '20px 0px' }}>
                  <Select defaultValue="+86" options={options} style={{ borderRadius: 0 }} />
                  <Input placeholder='请输入你的手机号' style={{ borderRadius: 0 }} onChange={(e) => { setPhone(e.target.value) }} />
                </Space.Compact>
                <Space.Compact style={{ width: '321px' }}>
                  <Input placeholder="输入验证码" style={{ borderRadius: 0 }} />
                  <Button style={{ width: '45%', borderRadius: 0 }} onClick={getcode}>{buttonFlag ? '获取验证码' : count}</Button>
                </Space.Compact>
                <br />
                <Checkbox style={{ marginTop: '20px' }}>
                  <span style={{ marginLeft: '10px' }}>自动登录</span>
                </Checkbox>
                <br />
                <Button type='primary' style={{ borderRadius: '0px', width: '321px', marginTop: '20px', height: '42px' }}>登录</Button>
              </div>
          }
          <div style={{ width: '321px', fontSize: '12px', marginTop: '20px', display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'rgb(54, 111, 255)', cursor: 'pointer' }} onClick={() => {
              setCodeLogin(!codelogin)
              setLoginFlag(true)
            }}>{codelogin ? '密码登录' : '验证码登录'}</span>
            <span onClick={() => {
              setIsLogin(false)
              setRegisterFlag(false)
            }}>用户注册</span>
            <span onClick={() => {
              setIsLogin(false)
              setRegisterFlag(true)
            }}>企业注册</span>
          </div>
        </div>
        :
        <div className='formlogin'>
          <div style={{ fontSize: '19px', marginTop: '20px' }}>{!registerFlag ? '用户注册' : '企业用户注册'}</div>
          {!registerFlag
            ?
            <div>
              <Space.Compact style={{ width: '321px', borderRadius: '0px', margin: '20px 0px' }}>
                <Select defaultValue="+86" options={options} style={{ borderRadius: 0 }} />
                <Input placeholder='请输入你的手机号' style={{ borderRadius: 0 }} />
              </Space.Compact>
              <Space.Compact style={{ width: '321px' }}>
                <Input placeholder="输入验证码" style={{ borderRadius: 0 }} />
                <Button style={{ width: '45%', borderRadius: 0 }} onClick={getcode}>{buttonFlag ? '获取验证码' : registerInfoUser}</Button>
              </Space.Compact>
              <br />
              <Checkbox style={{ marginTop: '20px' }}>
                <span style={{ marginLeft: '10px' }}>自动登录</span>
              </Checkbox>
              <br />
            </div>
            :
            <div>
              <Space.Compact style={{ width: '321px', borderRadius: '0px', margin: '20px 0px' }}>
                <Select defaultValue="+86" options={options} style={{ borderRadius: 0 }} />
                <Input placeholder='请输入你的手机号' style={{ borderRadius: 0 }} onChange={(e) => {
                  setUsertxt(e.target.value)
                }} />
              </Space.Compact>
              <Space.Compact style={{ width: '321px' }}>
                <Input placeholder="输入验证码" style={{ borderRadius: 0 }} />
                <Button style={{ width: '45%', borderRadius: 0 }} disabled={!RuserFlag} onClick={usergetcode}>{RuserFlag ? '获取验证码' : registerInfoUser}</Button>
              </Space.Compact>
              <br />
              <Checkbox style={{ marginTop: '20px' }}>
                <span style={{ marginLeft: '10px' }}>自动登录</span>
              </Checkbox>
              <br />
            </div>
          }

          <Button type='primary' style={{ borderRadius: '0px', width: '321px', marginTop: '20px', height: '42px' }}>注册</Button>
          <div style={{ width: '321px', fontSize: '12px', marginTop: '20px', display: 'flex', justifyContent: 'space-between' }}>

            <span onClick={() => {
              setIsLogin(false)
              setRegisterFlag(!registerFlag)
            }}>{registerFlag ? '用户注册' : '企业用户注册'}</span>
            <span
              style={{ color: 'rgb(54, 111, 255)', cursor: 'pointer' }}
              onClick={() => {
                setIsLogin(true)
              }}>账号登录</span>
          </div>
        </div>
      }


    </div>
  )
}
